<template>
  <view class="container">
    <!-- 导航栏 -->
    <nav-bar 
      :title="article.title"
      background="linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0))"
      showHome
    />
    
    <!-- 文章头部 -->
    <view class="article-header">
      <image :src="article.cover" mode="aspectFill" class="cover-image"></image>
      <view class="header-content">
        <view class="category-tag">{{article.category.name}}</view>
        <text class="title">{{article.title}}</text>
        <view class="meta">
          <text class="date">{{article.createTime}}</text>


          <text class="views">{{article.quantity}}阅读</text>
        </view>
      </view>
    </view>

    <!-- 文章内容 -->
    <view class="article-content">
      <view class="author-info">
        <image class="avatar" :src="article.avatar" mode="aspectFill"></image>
        <view class="info">
          <text class="name">{{article.nickname}}</text>
          <text class="desc">{{article.createTime}}</text>
        </view>
      </view>
      <!-- Markdown 内容 -->
      <view class="markdown-body">
        <view class="markdown-content">
          <!-- <rich-text :nodes="markdownHtml"></rich-text> -->
          <mp-html :content="article.content" />
        </view>
      </view>
      
      <!-- 文章标签 -->
      <view class="article-tags">
        <text class="tag" v-for="(tag, index) in article.tags" :key="index">#{{tag.name}}</text>
      </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="bottom-toolbar">
      <view class="toolbar-left">
        <view class="tool-item" @click="handleLike">
          <u-icon :name="isLike ? 'heart-fill' : 'heart'" :color="isLike ? '#ff5722' : '#909399'" size="40"></u-icon>
          <text :class="['tool-text', isLike ? 'active' : '']">点赞</text>
        </view>
        <view class="tool-item" @click="handleCollect">
          <u-icon :name="isCollected ? 'star-fill' : 'star'" :color="isCollected ? '#ffa726' : '#909399'" size="40"></u-icon>
          <text :class="['tool-text', isCollected ? 'active' : '']">收藏</text>
        </view>
      </view>
      <view class="share-btn" @click="handleShare">
        分享文章
      </view>
    </view>
  </view>
</template>

<script>
import { getArticleDetailApi, likeArticleApi, collectArticleApi } from '@/api/article'
import { highlight } from '@/utils/highlight'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
  components: {
    navBar: () => import('@/components/nav-bar/index.vue'),
    mpHtml
  },
  data() {
    return {
      article: {
		  category:{},
		  author:{}
	  },
      isLike: false,
      isCollected: false,
      markdownHtml: '',
      imageList: []
    }
  },

  onLoad(options) {
    if (options.id) {
      this.getArticleDetail(options.id)
    }
  },
  methods: {
    async getArticleDetail(id) {
      try {
        const res = await getArticleDetailApi(id)
        this.article = res.data
        this.isLike = res.data.isLike
        this.isCollected = res.data.isCollected
        // 解析 Markdown 内容
      } catch (error) {
        console.error('获取文章详情失败:', error)
        uni.showToast({
          title: '获取文章详情失败',
          icon: 'none'
        })
      }
    },

    async handleLike() {
      try { 
        await likeArticleApi(this.article.id)
        this.isLike = !this.isLike
        uni.showToast({
          title: this.isLike ? '已点赞' : '已取消点赞',
          icon: 'none'
        })
      } catch (error) {
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    },
    async handleCollect() {
      try {
        await collectArticleApi(this.article.id)
        this.isCollected = !this.isCollected
        uni.showToast({
          title: this.isCollected ? '已收藏' : '已取消收藏',
          icon: 'none'
        })
      } catch (error) {
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    },
    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 20%);
  padding-bottom: 120rpx;
}

.article-header {
  position: relative;
  margin-top: calc(var(--status-bar-height) * -1);
  overflow: hidden;

  .cover-image {
    width: 100%;
    height: 480rpx;
    transition: transform 0.3s ease;
  }

  .header-content {
    padding: 40rpx 30rpx 30rpx;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    
    .category-tag {
      display: inline-block;
      font-size: 22rpx;
      color: #fff;
      background: linear-gradient(135deg, rgba(41, 121, 255, 0.9), rgba(25, 118, 210, 0.9));
      padding: 8rpx 24rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      font-weight: 500;
      box-shadow: 0 2rpx 8rpx rgba(41, 121, 255, 0.3);
      backdrop-filter: blur(10rpx);
    }

    .title {
      font-size: 40rpx;
      font-weight: 700;
      color: #fff;
      margin-bottom: 20rpx;
      text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
      line-height: 1.5;
      letter-spacing: 0.5rpx;
    }

    .meta {
      font-size: 24rpx;
      color: rgba(255,255,255,0.95);
      display: flex;
      align-items: center;
      
      .date {
        display: flex;
        align-items: center;
      }
      
      .views {
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        &::before {
          content: "•";
          margin-right: 20rpx;
          opacity: 0.6;
        }
      }
    }
  }
}

.article-content {
  padding: 40rpx 30rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  
  .author-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    padding: 24rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
    border: 1rpx solid rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    &:active {
      transform: translateY(-2rpx);
      box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.08);
    }
    
    .avatar {
      width: 88rpx;
      height: 88rpx;
      border-radius: 44rpx;
      margin-right: 24rpx;
      border: 3rpx solid #fff;
      box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
    }
    
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .name {
        font-size: 30rpx;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8rpx;
        letter-spacing: 0.5rpx;
      }
      
      .desc {
        font-size: 24rpx;
        color: #909399;
      }
    }
  }
  
  .markdown-body {
    padding: 0;
    line-height: 1.8;
    color: #333;
    font-size: 30rpx;
    
    .markdown-content {
      /deep/ p {
        margin: 24rpx 0;
        line-height: 1.8;
        color: #444;
        font-size: 30rpx;
      }
      
      /deep/ h1, /deep/ h2, /deep/ h3, /deep/ h4, /deep/ h5, /deep/ h6 {
        margin: 40rpx 0 24rpx;
        font-weight: 700;
        color: #2c3e50;
        line-height: 1.4;
      }
      
      /deep/ h1 {
        font-size: 40rpx;
        border-bottom: 2rpx solid #e0e0e0;
        padding-bottom: 16rpx;
      }
      
      /deep/ h2 {
        font-size: 36rpx;
        border-left: 6rpx solid #2979ff;
        padding-left: 20rpx;
        margin-left: -20rpx;
      }
      
      /deep/ h3 {
        font-size: 32rpx;
      }
      
      /deep/ ul, /deep/ ol {
        margin: 24rpx 0;
        padding-left: 40rpx;
      }
      
      /deep/ li {
        margin: 12rpx 0;
        line-height: 1.8;
        color: #555;
      }
      
      /deep/ blockquote {
        margin: 24rpx 0;
        padding: 20rpx 24rpx;
        background: linear-gradient(to right, rgba(41, 121, 255, 0.08), rgba(41, 121, 255, 0.03));
        border-left: 4rpx solid #2979ff;
        border-radius: 8rpx;
        color: #666;
        font-style: italic;
      }
      
      /deep/ code {
        background-color: rgba(41, 121, 255, 0.1);
        color: #2979ff;
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        font-size: 26rpx;
        font-family: 'Consolas', 'Monaco', monospace;
      }
      
      /deep/ pre {
        margin: 24rpx 0;
        padding: 24rpx;
        background: #282c34;
        border-radius: 12rpx;
        overflow-x: auto;
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
        
        code {
          background: transparent;
          color: #abb2bf;
          padding: 0;
          font-size: 26rpx;
          line-height: 1.6;
        }
      }
      
      /deep/ img {
        max-width: 100%;
        height: auto;
        border-radius: 12rpx;
        margin: 32rpx 0;
        box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
        display: block;
      }
      
      /deep/ a {
        color: #2979ff;
        text-decoration: none;
        border-bottom: 1rpx solid rgba(41, 121, 255, 0.3);
        transition: all 0.2s ease;
        
        &:active {
          color: #1976d2;
          border-bottom-color: #1976d2;
        }
      }
      
      /deep/ table {
        width: 100%;
        margin: 24rpx 0;
        border-collapse: collapse;
        border-radius: 8rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
        
        th, td {
          padding: 16rpx;
          border: 1rpx solid #e0e0e0;
        }
        
        th {
          background: #f5f6fa;
          font-weight: 600;
          color: #303133;
        }
        
        td {
          background: #fff;
        }
      }
      
      /deep/ hr {
        margin: 40rpx 0;
        border: none;
        height: 1rpx;
        background: linear-gradient(to right, transparent, #e0e0e0, transparent);
      }
      
      /deep/ strong {
        font-weight: 700;
        color: #2c3e50;
      }
      
      /deep/ em {
        font-style: italic;
        color: #666;
      }
    }
  }
  
  .article-tags {
    margin-top: 50rpx;
    padding-top: 40rpx;
    border-top: 1rpx solid #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    
    .tag {
      font-size: 24rpx;
      color: #2979ff;
      background: linear-gradient(135deg, rgba(41, 121, 255, 0.1), rgba(41, 121, 255, 0.05));
      padding: 10rpx 28rpx;
      border-radius: 30rpx;
      border: 1rpx solid rgba(41, 121, 255, 0.2);
      font-weight: 500;
      transition: all 0.2s ease;
      
      &:active {
        background: linear-gradient(135deg, rgba(41, 121, 255, 0.15), rgba(41, 121, 255, 0.1));
        transform: scale(0.95);
      }
    }
  }
}

.bottom-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: linear-gradient(to top, #ffffff, #fafafa);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid rgba(0,0,0,0.05);
  z-index: 100;

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .tool-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12rpx 20rpx;
      border-radius: 12rpx;
      transition: all 0.2s ease;
      min-width: 80rpx;

      &:active {
        background: rgba(0,0,0,0.05);
        transform: scale(0.95);
      }

      .tool-text {
        font-size: 22rpx;
        color: #909399;
        margin-top: 6rpx;
        font-weight: 500;
        transition: color 0.2s ease;

        &.active {
          color: #ff5722;
          font-weight: 600;

          &:last-child {
            color: #ffa726;
          }
        }
      }
    }
  }

  .share-btn {
    background: linear-gradient(135deg, #2979ff, #1976d2);
    color: #fff;
    font-size: 28rpx;
    font-weight: 600;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    box-shadow: 0 6rpx 20rpx rgba(41,121,255,0.3);
    transition: all 0.2s ease;
    letter-spacing: 1rpx;

    &:active {
      transform: scale(0.96);
      box-shadow: 0 4rpx 16rpx rgba(41,121,255,0.25);
    }
  }
}

/deep/ ._root  {
  overflow-x: unset !important;
  overflow-y: unset !important;
}
</style> 